<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车页面</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shopCar.css">
    <script src="../js/request.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/underscore.js"></script>

</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <div class="head_top width clearfix">
            <img src="../images/logo.png">
            <div class="search_nav right">
                <input type="text" placeholder="请输入想要的商品" value="">
                <button id="search">搜索</button>
            </div>
        </div>
        <div class="head_dw width clearfix">
            <ul class="nologin">
                <li><a href="../index.html">首页</a></li>
                <li><a href="./login.html">登录</a></li>
                <li><a href="./register.html">注册</a></li>
            </ul>
            <ul class="login">
                <li><a href="../index.html">首页</a></li>
                <li class="active"><a href="./shopCar.html">购物车</a></li>
                <li><a href="./login.html" id="quit">退出登录</a></li>
            </ul>
            <div class="search_nav right mar">
                <input type="text" placeholder="请输入想要的商品" value="">
                <button id="search">搜索</button>
            </div>
        </div>
    </div>
    <div class="shop width clearfix">
        <div class="menu">
            <!-- <input type="checkbox" name="" id="">全选 -->
            <span>商品图</span>
            <span>商品描述</span>
            <span>商品单价</span>
            <span>商品数量</span>
            <span>小计</span>
            <span>操作</span>
        </div>
        <div class="shopcar"></div>
        <!-- <div class="footer clearfix">
            <div class="footer-left left">
                <input type="checkbox" class="hide left all" id="st">
                <label for="st" class="select left ma"></label>
                <span>全选</span>
                <a>删除</a>
                <a>移入收藏夹</a>
                <a>分享</a>
            </div>
            <div class="footer-right right">
                <span>已选商品<em class="number">0</em>件 合计（不含运费）：</span>
                <span class="sum">0</span>
                <button class="jiesuan">结算</button>
            </div>
        </div> -->
    </div>
</body>
<script>
    var shopcar = document.querySelector(".shopcar");
    var goodid = localStorage.getItem("goodid");
    var username = localStorage.getItem("username");
    var token = localStorage.getItem("token");
    var number1 = document.querySelector(".number");
    var sumber = document.querySelector(".sum");
    function getshopCar() {
        REQUEST.get("/shoplist", {
            params: {
                token: token,
            }
        }, function (data) {
            console.log(data);
            var html = "";
            
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                html += `
                <div class="car clearfix" >
                    <img src="${item.img_list_url}">
                    <div class="pro-message">
                        <p class="type_two">${item.type_two}</p>
                        <p class="supplier">${item.supplier}</p>
                        <p class="mack">${item.mack}</p>
                    </div>
                    <span class="price">${item.price}</span>
                    <div class="num">
                        <button class="reduce" data-id="${item.Id}">-</button>
                        <input type="text" value="${item.count}">
                        <button class="add" data-id="${item.Id}">+</button>
                    </div>
                    <span class="total">${item.price*item.count}</span>
                    <button class="dele" data-id="${item.Id}">删除</button>
                </div>
                `
            }
            shopcar.innerHTML += html;
            deleteData();
            addData();
            removeData();
            // var counts = document.querySelectorAll(".num>input");           
            // var sum = 0;
            // for(var i=0;i<counts.length;i++){
            //     var countItem = parseInt(counts[i].value);
            //     sum += countItem;
            //     number1.innerHTML = sum;                
            // }
            // var totals = document.querySelectorAll(".total"); 
            // var sumtotal = 0;          
            // for(var i=0;i<totals.length;i++){
            //     var countItem = parseInt(totals[i].innerHTML);
            //     sumtotal += countItem;
            //     sumber.innerHTML = sumtotal;             
            // } 
            

        })
    }
    getshopCar();

    // 删除功能
    function deleteData(){
        var delebtn = document.querySelectorAll(".dele");
        delebtn.forEach(function(item){
            item.onclick = function(){
                var id = item.getAttribute("data-id");
                var flag = confirm("确定要删除吗？"); 
                if(flag){
                    REQUEST.get("/del",{params:{token:token,goodId:id,}},function(data){ 
                        console.log(data);                       
                        if(data.code==1){                            
                            item.parentElement.style.display = "none"; 
                        }
                    }) 
                }                                      
            }
        })
    }

    //添加功能
    function addData(){
        var add = document.querySelectorAll(".add");
        add.forEach(function(item){                       
            item.onclick = function(){
                var count = this.previousElementSibling.value;  
                var price = this.parentElement.previousElementSibling.innerHTML;  
                var id = this.getAttribute("data-id");               
                REQUEST.get("/add",{params:{token:token,goodId:id}},function(data){  
                    // console.log(data);                  
                    if(data.code==1){
                        count ++;
                        item.previousElementSibling.value = count;
                        item.parentElement.nextElementSibling.innerHTML = count*price;  
                    }
                })    
                // var counts = document.querySelectorAll(".num>input");           
                // var sum = 1;
                // for(var i=0;i<counts.length;i++){
                //     var countItem = parseInt(counts[i].value);
                //     sum += countItem;
                                
                // }
                // number1.innerHTML = sum; 

                // var totals = document.querySelectorAll(".total"); 
                // var sumtotal = 0;          
                // for(var i=0;i<totals.length;i++){
                //     var countItem = parseInt(totals[i].innerHTML);
                //     sumtotal += countItem;
                //     sumber.innerHTML = sumtotal;                
                // }            
                    
            }
        })
    }

    //减少功能
    function removeData(){
        var add = document.querySelectorAll(".reduce");
        add.forEach(function(item){                         
            item.onclick = function(){
                var count = this.nextElementSibling.value;  
                var price = this.parentElement.previousElementSibling.innerHTML;               
                var id = this.getAttribute("data-id");
                REQUEST.get("/remove",{params:{token:token,goodId:id}},function(data){  
                    // console.log(data);                  
                    if(data.code==1){
                        count--;
                        if(count<=1){                            
                            count=1;
                        } 
                        item.nextElementSibling.value = count;
                        item.parentElement.nextElementSibling.innerHTML = count*price;
                          
                    }
                })                    
                // var counts = document.querySelectorAll(".num>input");          
                // var sum = number1.innerHTML;
                // console.log(sum);
                // sum--;
                // number1.innerHTML = sum;    
            }
        })
    }




    //验证登录
    checkLogin();
    // 搜索
    Search();

    /*
          url:'/detail'
    参数：    goodId: 

    添加购物车接口

    url: /add
    method :get
    params:
      goodId 商品id
      username:用户名
      token

    响应的数据 
    code 2 添加失败
    code 1 添加成功  
    
    减少商品数量
     url: /remove
    method :get
    params:
      goodId 商品id
      username:用户名
      token    令牌

    响应的数据 
    code 2 删除失败；
    code 1 删除数量成功
    code 0 token过期
    code: 3 购物车中没没有这个商品

    删除购物车
    url: /del
    method :get
    params:
      goodId 商品id
      username:用户名
      token

    响应的数据 
    code 2 删除失败
    code 1 删除成功  
    code 0 无效token 登录失败了 重新登录

    获取购物车列表
      url: /shopList
    method :get
    params:
      username:用户名
      token

    响应的数据 
    code 2 添加失败
    code 1 添加成功  
    code 0 无效token 登录失败了 重新登录

    */
</script>

</html>